<template>
  <el-form class="query-container" ref="queryFormRef" :model="queryParams" :inline="true" @submit.native.prevent>
    <el-form-item label="业务部门" prop="deptId">
      <el-select v-model="queryParams.deptId" style="width:150px">
        <el-option value="1" label="业务部门1"></el-option>
        <el-option value="2" label="业务部门2"></el-option>
        <el-option value="3" label="业务部门3"></el-option>
        <el-option value="4" label="业务部门4"></el-option>
        <el-option value="5" label="业务部门5"></el-option>
        <el-option value="6" label="业务部门6"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="客户状态" prop="status">
      <el-select v-model="queryParams.status" style="width:150px">
        <el-option value="10" label="未订单客户—一客到店"></el-option>
        <el-option value="20" label="未订单客户—二客到店"></el-option>
        <el-option value="30" label="未订单客户—多客到店"></el-option>
        <el-option value="40" label="订单客户—转单中"></el-option>
        <el-option value="50" label="订单客户—已完成"></el-option>
        <el-option value="60" label="订单客户—退/死单"></el-option>
        <el-option value="70" label="待量房客户"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="管理客户来源" prop="source">
      <el-select v-model="queryParams.source" style="width:150px">
        <el-option value="10" label="重点小区"></el-option>
        <el-option value="20" label="家博会"></el-option>
        <el-option value="30" label="第三方平台"></el-option>
        <el-option value="40" label="网络推广"></el-option>
        <el-option value="50" label="社区运营"></el-option>
        <el-option value="60" label="电视台引流"></el-option>
        <el-option value="70" label="地铁广告"></el-option>
        <el-option value="80" label="社区运营"></el-option>
        <el-option value="90" label="更多"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="" prop="field" style="margin-right:5px!important">
      <el-select v-model="queryParams.field" style="width:150px;">
        <el-option value="number" label="查询客户编号"></el-option>
        <el-option value="name" label="查询客户姓名"></el-option>
        <el-option value="phone" label="查询客户手机号"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="" prop="keyword">
      <el-input v-model="queryParams.keyword" clearable placeholder="输入关键字查询" @keyup.enter.native="handleQuery" style="width:150px"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleQuery">搜索</el-button>
      <el-button @click="resetQuery">重置</el-button>
    </el-form-item>
  </el-form>

  <div class="inner-container">
    <el-row :gutter="10" style="margin-bottom:8px">
      <el-col :span="1.5">
        <el-button type="primary" plain @click="$router.push('/crm/customer/add')">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain @click="goToEditView" :disabled="selectedIds.length!==1">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain @click="handleDelete" :disabled="!selectedIds.length">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain @click="ElMessage.info('导出表单')">导出表单</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column prop="id" label="客户编号" align="center"></el-table-column>
      <el-table-column prop="name" label="客户姓名"  align="center" show-overflow-tooltip>
        <template #default="scope">
          <el-link type="primary" :underline="false" @click="selectInfo(scope.row)">{{ scope.row.name }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="contactPhone" label="联系电话" min-width="110" align="center"></el-table-column>
      <el-table-column prop="propertyName" label="楼盘名称" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="propertyAddr" label="楼盘地址" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="source" label="客户来源" align="center" :formatter="customerSourceFormatter" show-overflow-tooltip></el-table-column>
      <el-table-column prop="designer" label="设计师" align="center"
                       show-overflow-tooltip :formatter="customerDesignerFormatter"></el-table-column>
      <el-table-column prop="manager" label="客户经理" align="center"></el-table-column>
      <el-table-column prop="followTime" label="最近跟进" min-width="100" align="center"></el-table-column>
<!--      <el-table-column prop="followNum" label="次数" align="center"></el-table-column>-->
      <el-table-column prop="reserveTime" label="预约跟进" min-width="100" align="center"></el-table-column>
      <el-table-column prop="merchandiser" label="跟单人" align="center"></el-table-column>
      <el-table-column prop="status" label="客户状态" :formatter="customerStatusFormatter"  align="center" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="180">
        <template #default="scope">
          <el-button type="primary" link @click="selectInfo(scope.row)">详情</el-button>
          <el-button type="primary" link @click="goFollow(scope.row)">跟踪</el-button>
          <el-button type="primary" link @click="goToEditView(scope.row)">修改</el-button>
          <el-button type="primary" link @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <br>
    <el-pagination
        :total="total"
        v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {useRoute, useRouter} from "vue-router"
import request from '@/utils/request'

const router = useRouter()
const route = useRoute()

// --------------------------------------------------

const loading = ref(false)
//form对象
const queryFormRef = ref()
//定义保存搜索对象
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  status: undefined,
  source: undefined,
  field: 'number',
  keyword: undefined,
  deptId: undefined
})
//数据总数
const total = ref(0)
//列表数据
const tableData = ref([])
const selectedIds = ref([])

const listData = () => {
  loading.value=true;
  request.get('/api/crm/customer/select',{params: queryParams.value
  }).then(res=>{
    tableData.value =res.data.list
    total.value =res.data.total
    loading.value=false
    //console.log(tableData.value)
  })
}

//定义用于保存设计师数组
const getDesignerArr =  ref([])
const  getDesigner = ()=>{
  request.get('/api/crm/user/select').then(res => {
    getDesignerArr.value = res.data
    //console.log(getDesignerArr.value)
  })
}

const  customerDesignerFormatter = (row,column,cellValue)=>{
  if(!getDesignerArr.value){
    return cellValue;
  }
  for(let item of getDesignerArr.value){
    if(item.id === cellValue){
      cellValue = item.name;
    }
  }
  return cellValue;
}


//定义数组用来保存车辆类型字典项
const customerStatusArr = ref([]);
const customerSourceArr = ref([]);
onMounted(()=>{
  getDesigner()
  loadDictOptions(customerStatusArr,'customer_status');
  loadDictOptions(customerSourceArr,'customer_source');

})



const  customerStatusFormatter = (row,column,cellValue,index)=>{
  if(!customerStatusArr.value){
    return cellValue;
  }
  for(let item of customerStatusArr.value){
    if(item.value == cellValue){
      cellValue = item.label;
    }
  }

  return cellValue;
}

const  customerSourceFormatter = (row,column,cellValue,index)=>{
  if(!customerSourceArr.value){
    return cellValue;
  }
  for(let item of customerSourceArr.value){
    if(item.value == cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}

const handleSelectionChange = (selection) => {
  selectedIds.value = selection.map(item => item.id)
}

const handleQuery = () => {
  queryParams.value.pageNum = 1
  listData()
}

const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

const handleCurrentChange = (val) => {
  queryParams.value.pageNum = val
  listData()
}

const handleSizeChange = (val) => {
  queryParams.value.pageSize = val
  listData()
}

const handleDelete = (row) => {
  let ids = row ? [row.id] : [...selectedIds.value]
  if (ids.length === 0) {
    ElMessage.error('请选择要删除的记录')``
    return
  }
  ElMessageBox.confirm('确定删除吗？', '提示', {
    type: 'warning'
  }).then(() => {
    request.post('/api/crm/customer/delete/'+ids).then(res=>{
      selectedIds.value.length = 0
      listData()
      ElMessage.success('删除成功')
    })
  }).catch(() => {
  })
}

const goToEditView = (row) => {
  let id = row.id || selectedIds.value
  router.push({path: '/crm/customer/edit', query: {id: id}})

}

const  selectInfo=(row)=>{
  let id = row.id || selectedIds.value
  router.push({path: '/crm/customer/info', query: {id: id}})
}
const  goFollow=(row)=>{
  let id = row.id || selectedIds.value
  router.push({path: '/crm/customer/follow', query: {id: id}})
}
// --------------------------------------------------
onMounted(() => {
  listData()
})
</script>

<style scoped>

</style>
